<template>
  <div class="wrap">
   <p class="tit">通过条码 82423732473 找到以下图书</p>
   <ul>
     <li @click="toggle(0)">

      <img src='../../imgs/scanBook.jpg' alt="">
       <div class="content">
         <p>西游记</p>
         <p>施耐庵·中信出版社·45页</p>
       </div>
       <div class="choose">
        <icon type="success" size="20" v-if="arr[0]" ></icon>
        <icon type="circle" size="20" v-else></icon>
      </div>
     </li>
     <li  @click="toggle(1)">
      <div class="img">
        <p>三</p>
        <p>国演义</p>
      </div>
       <div class="content">
         <p>三国演义</p>
         <p>罗贯中·中信出版社·245页</p>
       </div>
       <div class="choose" >
        <icon type="success" size="20" v-if="arr[1]"></icon>
        <icon type="circle" size="20" v-else ></icon>
      </div>
     </li>
     <li  @click="toggle(2)">
      <img src='../../imgs/sun.png' alt="">
      <!-- <img src='../../imgs/scanBook.jpg' alt=""> -->
       <div class="content">
         <p>红楼梦</p>
         <p>曹雪芹·中信出版社·456页</p>
       </div>
       <div class="choose">
        <icon type="success" size="20" v-if="arr[2]"></icon>
        <icon type="circle" size="20" v-else ></icon>
      </div>
     </li>
     <li @click="toggle(3)">
      <img src='../../imgs/sun.png' alt="">
      <!-- <img src='../../imgs/scanBook.jpg' alt=""> -->
       <div class="content">
         <p>水浒传</p>
         <p>吴承恩·中信出版社·156页</p>
       </div>
       <div class="choose">
        <icon type="success" size="20" v-if="arr[3]"></icon>
        <icon type="circle" size="20" v-else ></icon>
      </div>
     </li>
   </ul>
   <div class="blueBtn">添加</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      plan:false,
      arr:[true,false,false,false]
    }
  },
  components: {

  },
  computed: {

  },

  methods: {
    toggle(index){
      this.arr = [false,false,false,false]
      this.arr[index] = true
    }
  },

}
</script>

<style scoped lang="less">
.wrap{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0 32rpx;
  // overflow: hidden;
  .tit{
    color:#888888;
    font-size:28rpx;
    padding: 32rpx 0;
    text-align: center;
  }
  ul{
    li{
      height: 150rpx;
      background: #fff;
      display: flex;
      padding: 0 32rpx;
      justify-content: center;
      align-items: center;
      margin-bottom:20rpx;
      img{
        width:75rpx;
        height: 106rpx;
        margin-right:20rpx;
      }
      .img{
        width:75rpx;
        height: 106rpx;
        margin-right:20rpx;
        background: #7ECC61;
        p:nth-of-type(1){
          font-size:24rpx;
          color:#fff;
          padding-left:4rpx;
        }
        p:nth-of-type(2){
          font-size:20rpx;
          color:#fff;
          padding-left:4rpx;
        }
      }
      .content{
        flex:1;
        p:nth-of-type(1){
          font-size:34rpx;
          color:#222222;
        }
        p:nth-of-type(2){
          font-size:26rpx;
          color:#999;
        }
      }
      .choose{

      }
    }
  }
  .blueBtn{
    background: #1387FF;
    height:96rpx;
    line-height: 96rpx;
    text-align: center;
    border-radius:10rpx;
    font-size:32rpx;
    color:#fff;
    margin-top:32rpx;

  }
}
</style>
